[V0_FILE]svelte:file="src/lib/components/Hero.svelte" isEdit="true" isMerged="true"

{#if visible}

CAPTURING
THE SILENCE

Photography is the art of freezing time. In the chaos of the natural world, we find a hidden order, a silent rhythm that speaks to the soul.

Est. 2024 — Portfolio

{/if}

Scroll

[V0_FILE]svelte:file="src/lib/components/Footer.svelte" isEdit="true" isMerged="true" [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.3", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.76", "svelte": "5.43.12", "framer-motion": "12.23.24" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]svelte:file="src/lib/components/ChaoticGallery.svelte" isEdit="true" isQuickEdit="true" isMerged="true"

{#each items as item}

0{item.id}

{item.title}

{/each}

[V0_FILE]jpg:file="static/images/misty-forest.jpg" isDeleted="true" isMoved="true" isMovedTo="public/images/misty-forest.jpg" ...moved to public/images/misty-forest.jpg... [V0_FILE]jpg:file="public/images/misty-forest.jpg" isMoved="true" isMovedFrom="static/images/misty-forest.jpg" url="https://blobs.vusercontent.net/blob/attachments/gen-images/static/images/misty-forest-1G10qz8NHlMAZ76xq03OGl61GcesDP.jpg" [V0_FILE]jpg:file="static/images/mountain-peak.jpg" isDeleted="true" isMoved="true" isMovedTo="public/images/mountain-peak.jpg" ...moved to public/images/mountain-peak.jpg... [V0_FILE]jpg:file="public/images/mountain-peak.jpg" isMoved="true" isMovedFrom="static/images/mountain-peak.jpg" url="https://blobs.vusercontent.net/blob/attachments/gen-images/static/images/mountain-peak-Z8Jgpcr3MK9o4rdShclClEZNC1SMWi.jpg" [V0_FILE]jpg:file="static/images/lake-reflection.jpg" isDeleted="true" isMoved="true" isMovedTo="public/images/lake-reflection.jpg" ...moved to public/images/lake-reflection.jpg... [V0_FILE]jpg:file="public/images/lake-reflection.jpg" isMoved="true" isMovedFrom="static/images/lake-reflection.jpg" url="https://blobs.vusercontent.net/blob/attachments/gen-images/static/images/lake-reflection-Dpt5UnZZK505WHUWeeJuXrAsqoj5xz.jpg" [V0_FILE]jpg:file="static/images/rock-texture.jpg" isDeleted="true" isMoved="true" isMovedTo="public/images/rock-texture.jpg" ...moved to public/images/rock-texture.jpg... [V0_FILE]jpg:file="public/images/rock-texture.jpg" isMoved="true" isMovedFrom="static/images/rock-texture.jpg" url="https://blobs.vusercontent.net/blob/attachments/gen-images/static/images/rock-texture-WsHgUJ4zsYAiq1ZhfSghGunbFB4E2Q.jpg" [V0_FILE]jpg:file="static/images/fern-leaf.jpg" isDeleted="true" isMoved="true" isMovedTo="public/images/fern-leaf.jpg" ...moved to public/images/fern-leaf.jpg... [V0_FILE]jpg:file="public/images/fern-leaf.jpg" isMoved="true" isMovedFrom="static/images/fern-leaf.jpg" url="https://blobs.vusercontent.net/blob/attachments/gen-images/static/images/fern-leaf-HdrLCBVkZEBW8EqTGtiIAvTmzCbWuA.jpg" [V0_FILE]jpg:file="static/images/stormy-ocean.jpg" isDeleted="true" isMoved="true" isMovedTo="public/images/stormy-ocean.jpg" ...moved to public/images/stormy-ocean.jpg... [V0_FILE]jpg:file="public/images/stormy-ocean.jpg" isMoved="true" isMovedFrom="static/images/stormy-ocean.jpg" url="https://blobs.vusercontent.net/blob/attachments/gen-images/static/images/stormy-ocean-wvnCLNguZf6hpq7f4mfju4mLAksnck.jpg" [V0_FILE]jpg:file="static/images/sand-dunes.jpg" isDeleted="true" isMoved="true" isMovedTo="public/images/sand-dunes.jpg" ...moved to public/images/sand-dunes.jpg... [V0_FILE]jpg:file="public/images/sand-dunes.jpg" isMoved="true" isMovedFrom="static/images/sand-dunes.jpg" url="https://blobs.vusercontent.net/blob/attachments/gen-images/static/images/sand-dunes-YzJ4DNPHSmGmGyojKMLEVOOEyfOFro.jpg" [V0_FILE]jpg:file="static/images/starry-night.jpg" isDeleted="true" isMoved="true" isMovedTo="public/images/starry-night.jpg" ...moved to public/images/starry-night.jpg... [V0_FILE]jpg:file="public/images/starry-night.jpg" isMoved="true" isMovedFrom="static/images/starry-night.jpg" url="https://blobs.vusercontent.net/blob/attachments/gen-images/static/images/starry-night-d3ivqUyvQ6zaFUD5Hhast9t1SiUx93.jpg" [V0_FILE]svelte:file="src/routes/+page.svelte" isDeleted="true" ...deleted... [V0_FILE]svelte:file="src/routes/+layout.svelte" isDeleted="true" ...deleted... [V0_FILE]html:file="src/app.html" isDeleted="true" ...deleted... [V0_FILE]css:file="src/app.css" isDeleted="true" ...deleted... [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" import type React from "react" import type { Metadata } from "next" import { Inter, Playfair_Display } from "next/font/google" import "./globals.css" const inter = Inter({ subsets: ["latin"], variable: "--font-sans" }) const playfair = Playfair_Display({ subsets: ["latin"], variable: "--font-serif" }) export const metadata: Metadata = { title: "Capturing The Silence", description: "Fine art photography portfolio", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isFixed="true" isEdit="true" isQuickEdit="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Darker Theme - Almost Black */ --background: hsl(0 0% 3%); --foreground: hsl(0 0% 98%); --card: hsl(0 0% 3%); --card-foreground: hsl(0 0% 98%); --popover: hsl(0 0% 3%); --popover-foreground: hsl(0 0% 98%); --primary: hsl(0 0% 98%); --primary-foreground: hsl(0 0% 3%); --secondary: hsl(0 0% 12%); --secondary-foreground: hsl(0 0% 98%); --muted: hsl(0 0% 12%); --muted-foreground: hsl(0 0% 60%); --accent: hsl(0 0% 12%); --accent-foreground: hsl(0 0% 98%); --destructive: hsl(0 62.8% 30.6%); --destructive-foreground: hsl(0 0% 98%); --border: hsl(0 0% 12%); --input: hsl(0 0% 12%); --ring: hsl(0 0% 80%); --radius: 0rem; --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: hsl(0 0% 3%); --foreground: hsl(0 0% 98%); --card: hsl(0 0% 3%); --card-foreground: hsl(0 0% 98%); --popover: hsl(0 0% 3%); --popover-foreground: hsl(0 0% 98%); --primary: hsl(0 0% 98%); --primary-foreground: hsl(0 0% 3%); --secondary: hsl(0 0% 12%); --secondary-foreground: hsl(0 0% 98%); --muted: hsl(0 0% 12%); --muted-foreground: hsl(0 0% 60%); --accent: hsl(0 0% 12%); --accent-foreground: hsl(0 0% 98%); --destructive: hsl(0 62.8% 30.6%); --destructive-foreground: hsl(0 0% 98%); --border: hsl(0 0% 12%); --input: hsl(0 0% 12%); --ring: hsl(0 0% 80%); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { /* optional: --font-sans, --font-serif, --font-mono if they are applied in the layout.tsx */ --font-sans: var(--font-sans); --font-serif: var(--font-serif); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } html { scroll-behavior: smooth; } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: hsl(var(--border)); } ::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground)); } } [V0_FILE]typescriptreact:file="components/hero.tsx" isEdit="true" "use client" import { useEffect, useState } from "react" import { motion, useScroll, useTransform } from "framer-motion" export function Hero() { const { scrollY } = useScroll() const y = useTransform(scrollY, [0, 1000], [0, 200]) const [mounted, setMounted] = useState(false) useEffect(() => { setMounted(true) }, []) if (!mounted) return null return (

{/* Background Parallax Element */}

CAPTURING
THE SILENCE

Photography is the art of freezing time. In the chaos of the natural world, we find a hidden order, a silent rhythm that speaks to the soul.

Est. 2024 — Portfolio

{/* Scroll Indicator */} Scroll

) } [V0_FILE]typescriptreact:file="components/chaotic-gallery.tsx" isEdit="true" "use client" import { motion } from "framer-motion" import Image from "next/image" const items = [ { id: 1, span: "col-span-12 md:col-span-6 lg:col-span-4", height: "h-[400px]", src: "/images/misty-forest.jpg", title: "Morning Mist", }, { id: 2, span: "col-span-12 md:col-span-6 lg:col-span-8", height: "h-[400px]", src: "/images/mountain-peak.jpg", title: "High Altitude", }, { id: 3, span: "col-span-12 md:col-span-4 lg:col-span-3", height: "h-[600px]", src: "/images/lake-reflection.jpg", title: "Mirror", }, { id: 4, span: "col-span-12 md:col-span-8 lg:col-span-6", height: "h-[600px]", src: "/images/rock-texture.jpg", title: "Stone Skin", }, { id: 5, span: "col-span-12 md:col-span-12 lg:col-span-3", height: "h-[300px] lg:h-[600px]", src: "/images/fern-leaf.jpg", title: "Details", }, { id: 6, span: "col-span-12 md:col-span-6 lg:col-span-5", height: "h-[500px]", src: "/images/stormy-ocean.jpg", title: "Turbulence", }, { id: 7, span: "col-span-12 md:col-span-6 lg:col-span-7", height: "h-[500px]", src: "/images/sand-dunes.jpg", title: "Golden Hour", }, { id: 8, span: "col-span-12 md:col-span-12 lg:col-span-12", height: "h-[700px]", src: "/images/starry-night.jpg", title: "Cosmos", }, ] export function ChaoticGallery() { return (

{items.map((item, index) => (

{/* Image Container */}

{/* Overlay Lines */}

{/* Content */}

0{item.id}

{item.title}

))}

{/* "Chaotic" decorative lines */}

) } [V0_FILE]typescriptreact:file="components/footer.tsx" isEdit="true" "use client" export function Footer() { const scrollToTop = () => { window.scrollTo({ top: 0, behavior: "smooth" }) } return ( ) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" import { Hero } from "@/components/hero" import { ChaoticGallery } from "@/components/chaotic-gallery" import { Footer } from "@/components/footer" export default function Page() { return (

) }

CAPTURING THE SILENCE

{item.title}

CAPTURING THE SILENCE

{item.title}

CAPTURING
THE SILENCE

CAPTURING
THE SILENCE

About

Tags

Share

About

Tags

Share

More from nmonto

More Templates Like This

About

Tags

Share

About

Tags

Share

More from nmonto

More Templates Like This